
var EventCenter = {
  on: function(type, handler){
    $(document).on(type, handler)
  },
  fire: function(type, data){
    $(document).trigger(type,data)
  }
}

// EventCenter.on('hello', function(e,data){
//   console.log(data)
// })

// EventCenter.fire('hello', '你好')

var Footer = {
    // 初始化
    init: function(){
    	this.$footer = $('footer')
    	this.$ul = this.$footer.find('ul')
    	this.$box = this.$footer.find('.box')
    	this.$leftBtn = this.$footer.find('.icon-left')
    	this.$rightBtn = this.$footer.find('.icon-right')


    	this.bind()
    	this.render()
    },
    
    // 绑定事件
    bind: function(){
    	var _this = this
    	this.$rightBtn.on('click',function(){
    		_this.$ul.animate({
               left: '-='+this.$box.width()
    		},400)
    	})
    },

    // 渲染页面
    render(){
   	    var _this = this
   	    $.getJSON('//jirenguapi.applinzi.com/fm/getChannels.php')
   	    .done(function(ret){
   	   	   console.log(ret)
   	   	   _this.renderFooter(ret.channels)
   	    }).fail(function(){
   	   	   console.log('error')
   	    })
    },

    // 渲染页脚
    renderFooter: function(channels){
        console.log(channels)
        var html = ''
        channels.forEach(function(chnnel){
        	html += '<li data-channel-id = '+ channel.channel_id+' data-channel-name = '+channel.name+'>'
        	      + '   <div class="cover" style="background-image:url('+channel.cover_small+')"></div>'
                  + '   <h3>'+ channel.name +'</h3>'
                  +'</li>'
        })
        this.$ul.html(html)
        this.setStyle()
    },

    // 设置样式
    setStyle: function(){
    	var count = this.$footer.find('li').length
    	var width = this.$footer.find('li').outerWidth(true)
    	console.log(count,width)
    	this.$ul.css({
    		width:count * width + 'px'
    	})
      }
    }

